import { createStore } from "vuex";

export default createStore({
  state: {
    userInfo: {
      name: "John Doe",
      id: 1101010,
      email: "",
      avatar: "", //头像
    },
    token: "",
  },
  mutations: {},
  actions: {
    setUserInfo(store, userInfo) {
      store.userInfo = userInfo;
    },
  },
  modules: {},
});

/* <template>
  <div class="commentcontainer">
    <div class="commentleft">
      <img
        style="width: 30px; height: 30px"
        :src="commentinfo.head_url"
        alt=" avatar"
      /><!--头像-->
      <span>{{ commentinfo.baseid }}</span><!--用户id-->
    </div>
    <div class="commentright">
      <div>
        <h1>{{ commentinfo.username }}{{ ":" }}</h1><!--用户名-->
        <p>{{ commentinfo.commentbody }}</p><!--评论内容-->
      </div>

      <p>{{ commentinfo.time }}</p>
      <!--时间-->
    </div>
  </div>
  <!--container -->
</template>

<script>
export default {
  name: "comment",
  data() {
    return {};
  },
  methods: {},
  props: ["commentinfo"],
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.commentcontainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px 0;
}
.commentcontainer > .commentleft {
  margin-right: 20px;
}
.commentcontainer > .commentright {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.commentcontainer > .commentright > div {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.commentcontainer > .commentright > div > h1 {
  padding: 0;
  margin: 0;
  font-size: 15px;
  line-height: 15px;
  opacity: 0.9;
}
.commentcontainer > .commentright > div > p {
  padding: 0;
  margin: 0;
  font-size: 10px;
  line-height: 10px;
  opacity: 0.8;
  margin-left: 5px;
}
.commentcontainer > .commentright > p {
  padding: 0;
  margin: 0;
  font-size: 10px;
  opacity: 0.8;
  margin-top: 10px;
}
</style> */
